<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个性化早餐推荐 - 晨食记</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0A7CFF', // 鸿蒙蓝
                        morning: {
                            light: '#FFF3E0',
                            DEFAULT: '#FF9F43',
                            dark: '#F57C00'
                        },
                        health: {
                            light: '#E8F5E9',
                            DEFAULT: '#36D399',
                            warning: '#FFB400',
                            danger: '#F87272'
                        }
                    },
                    fontFamily: {
                        sans: ['HarmonyOS Sans', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(10, 124, 255, 0.05), 0 8px 10px -6px rgba(10, 124, 255, 0.02);
            }
            .input-focus {
                @apply focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none;
            }
            .fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans min-h-screen">
    <!-- 顶部导航 -->
    <nav class="bg-white shadow-sm fixed top-0 left-0 right-0 z-10">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <button id="backBtn" class="text-gray-700 hover:text-primary transition-colors">
                <i class="fa fa-arrow-left"></i>
            </button>
            <h1 class="text-lg font-semibold text-gray-800">个性化早餐推荐</h1>
            <div class="w-6"></div> <!-- 占位，保持标题居中 -->
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 pt-20 pb-24">
        <!-- 介绍卡片 -->
        <section class="mt-6 bg-gradient-to-br from-primary/5 to-morning/10 rounded-2xl p-5">
            <div class="flex items-start">
                <div class="bg-primary/10 p-2 rounded-full mr-3 mt-1">
                    <i class="fa fa-balance-scale text-primary"></i>
                </div>
                <div>
                    <h2 class="font-medium text-gray-800 mb-1">为你定制的营养早餐</h2>
                    <p class="text-gray-600 text-sm">根据你的身体数据，我们会计算每日所需热量，并推荐最适合你的早餐组合</p>
                </div>
            </div>
        </section>

        <!-- 数据输入表单 -->
        <section id="dataForm" class="mt-6 bg-white rounded-2xl p-5 shadow-sm card-shadow">
            <h2 class="text-gray-800 font-medium mb-4">你的身体数据</h2>
            
            <form id="userDataForm">
                <!-- 性别选择 -->
                <div class="mb-5">
                    <label class="block text-sm font-medium text-gray-700 mb-2">性别</label>
                    <div class="flex gap-4">
                        <label class="inline-flex items-center">
                            <input type="radio" name="gender" value="male" class="w-4 h-4 text-primary input-focus" checked>
                            <span class="ml-2 text-gray-700">男</span>
                        </label>
                        <label class="inline-flex items-center">
                            <input type="radio" name="gender" value="female" class="w-4 h-4 text-primary input-focus">
                            <span class="ml-2 text-gray-700">女</span>
                        </label>
                    </div>
                </div>
                
                <!-- 身高输入 -->
                <div class="mb-5">
                    <label for="height" class="block text-sm font-medium text-gray-700 mb-2">身高 (厘米)</label>
                    <div class="relative">
                        <input type="number" id="height" name="height" min="50" max="250" value="170" 
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg text-gray-700 input-focus">
                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-500">
                            cm
                        </div>
                    </div>
                </div>
                
                <!-- 体重输入 -->
                <div class="mb-5">
                    <label for="weight" class="block text-sm font-medium text-gray-700 mb-2">体重 (公斤)</label>
                    <div class="relative">
                        <input type="number" id="weight" name="weight" min="10" max="200" value="65" 
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg text-gray-700 input-focus">
                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-500">
                            kg
                        </div>
                    </div>
                </div>
                
                <!-- 活动水平 -->
                <div class="mb-6">
                    <label for="activity" class="block text-sm font-medium text-gray-700 mb-2">活动水平</label>
                    <select id="activity" name="activity" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg text-gray-700 input-focus">
                        <option value="sedentary">久坐不动（很少或不运动）</option>
                        <option value="light" selected>轻度活动（每周轻度运动1-3天）</option>
                        <option value="moderate">中度活动（每周中度运动3-5天）</option>
                        <option value="active">活跃（每周高强度运动6-7天）</option>
                        <option value="veryActive">非常活跃（每天高强度运动或体力劳动）</option>
                    </select>
                </div>
                
                <!-- 提交按钮 -->
                <button type="submit" class="w-full bg-primary text-white py-3 px-4 rounded-lg font-medium hover:bg-primary/90 transition-colors flex items-center justify-center">
                    <i class="fa fa-calculator mr-2"></i> 计算并推荐早餐
                </button>
            </form>
        </section>
        
        <!-- 结果展示区 -->
        <section id="resultSection" class="mt-6 hidden fade-in">
            <!-- 每日需求摘要 -->
            <div class="bg-white rounded-2xl p-5 shadow-sm card-shadow mb-6">
                <h2 class="text-gray-800 font-medium mb-4">你的营养需求</h2>
                
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-gray-50 p-3 rounded-xl">
                        <p class="text-sm text-gray-500 mb-1">BMI 指数</p>
                        <p class="text-xl font-semibold text-gray-800" id="bmiValue">22.5</p>
                        <p class="text-xs text-gray-600" id="bmiStatus">正常范围</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-xl">
                        <p class="text-sm text-gray-500 mb-1">每日所需热量</p>
                        <p class="text-xl font-semibold text-gray-800" id="caloriesValue">2,150</p>
                        <p class="text-xs text-gray-600">千卡/天</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-xl">
                        <p class="text-sm text-gray-500 mb-1">早餐建议热量</p>
                        <p class="text-xl font-semibold text-gray-800" id="breakfastCalories">645</p>
                        <p class="text-xs text-gray-600">约占全天30%</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-xl">
                        <p class="text-sm text-gray-500 mb-1">早餐蛋白质需求</p>
                        <p class="text-xl font-semibold text-gray-800" id="proteinNeed">20-25g</p>
                        <p class="text-xs text-gray-600">约占早餐25%</p>
                    </div>
                </div>
            </div>
            
            <!-- 推荐早餐组合 -->
            <div class="bg-white rounded-2xl p-5 shadow-sm card-shadow mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-gray-800 font-medium">为你推荐的早餐组合</h2>
                    <span class="text-xs bg-health/10 text-health px-2 py-1 rounded-full">根据你的数据定制</span>
                </div>
                
                <!-- 推荐组合1 -->
                <div class="border border-gray-100 rounded-xl p-4 mb-4 hover:border-primary/30 transition-colors">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="font-medium text-gray-800">均衡能量组合</h3>
                        <div class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">635千卡</div>
                    </div>
                    
                    <div class="grid grid-cols-3 gap-3 mb-3">
                        <div class="text-center">
                            <div class="w-16 h-16 mx-auto bg-morning/10 rounded-full flex items-center justify-center mb-1">
                                <i class="fa fa-birthday-cake text-morning text-xl"></i>
                            </div>
                            <p class="text-xs text-gray-700">全麦面包 2片</p>
                        </div>
                        <div class="text-center">
                            <div class="w-16 h-16 mx-auto bg-health/10 rounded-full flex items-center justify-center mb-1">
                                <i class="fa fa-dot-circle-o text-health text-xl"></i>
                            </div>
                            <p class="text-xs text-gray-700">煎蛋 1个</p>
                        </div>
                        <div class="text-center">
                            <div class="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-1">
                                <i class="fa fa-apple text-green-500 text-xl"></i>
                            </div>
                            <p class="text-xs text-gray-700">苹果 1个</p>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-2 rounded-lg text-xs text-gray-600">
                        <div class="flex justify-between mb-1">
                            <span>蛋白质</span>
                            <span>22g (满足需求)</span>
                        </div>
                        <div class="flex justify-between mb-1">
                            <span>碳水化合物</span>
                            <span>75g (健康比例)</span>
                        </div>
                        <div class="flex justify-between">
                            <span>膳食纤维</span>
                            <span>8g (丰富)</span>
                        </div>
                    </div>
                </div>
                
                <!-- 推荐组合2 -->
                <div class="border border-gray-100 rounded-xl p-4 hover:border-primary/30 transition-colors">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="font-medium text-gray-800">快捷营养组合</h3>
                        <div class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">650千卡</div>
                    </div>
                    
                    <div class="grid grid-cols-3 gap-3 mb-3">
                        <div class="text-center">
                            <div class="w-16 h-16 mx-auto bg-morning/10 rounded-full flex items-center justify-center mb-1">
                                <i class="fa fa-square-o text-morning text-xl"></i>
                            </div>
                            <p class="text-xs text-gray-700">燕麦粥 1碗</p>
                        </div>
                        <div class="text-center">
                            <div class="w-16 h-16 mx-auto bg-health/10 rounded-full flex items-center justify-center mb-1">
                                <i class="fa fa-glass text-health text-xl"></i>
                            </div>
                            <p class="text-xs text-gray-700">牛奶 250ml</p>
                        </div>
                        <div class="text-center">
                            <div class="w-16 h-16 mx-auto bg-yellow-100 rounded-full flex items-center justify-center mb-1">
                                <i class="fa fa-star text-yellow-500 text-xl"></i>
                            </div>
                            <p class="text-xs text-gray-700">香蕉 1根</p>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-2 rounded-lg text-xs text-gray-600">
                        <div class="flex justify-between mb-1">
                            <span>蛋白质</span>
                            <span>20g (满足需求)</span>
                        </div>
                        <div class="flex justify-between mb-1">
                            <span>碳水化合物</span>
                            <span>85g (健康比例)</span>
                        </div>
                        <div class="flex justify-between">
                            <span>膳食纤维</span>
                            <span>6g (良好)</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 营养小贴士 -->
            <div class="bg-white rounded-2xl p-5 shadow-sm card-shadow">
                <h2 class="text-gray-800 font-medium mb-3">个性化营养建议</h2>
                
                <div class="flex items-start mb-3">
                    <div class="bg-morning/10 p-1.5 rounded-full mr-3 mt-0.5">
                        <i class="fa fa-lightbulb-o text-morning text-sm"></i>
                    </div>
                    <p class="text-sm text-gray-600" id="nutritionTip">根据你的身体数据，早餐摄入足够的蛋白质有助于维持肌肉量和提高饱腹感，建议每餐包含至少20克优质蛋白质。</p>
                </div>
                
                <div class="flex items-start">
                    <div class="bg-primary/10 p-1.5 rounded-full mr-3 mt-0.5">
                        <i class="fa fa-clock-o text-primary text-sm"></i>
                    </div>
                    <p class="text-sm text-gray-600">建议在起床后1小时内吃早餐，有助于启动新陈代谢，提供全天能量。</p>
                </div>
            </div>
        </section>
    </main>

    <!-- 底部操作栏 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 py-3 px-4 hidden" id="resultFooter">
        <button id="saveRecommendation" class="w-full bg-primary text-white py-2.5 px-4 rounded-lg font-medium hover:bg-primary/90 transition-colors">
            保存推荐到我的早餐计划
        </button>
    </footer>

    <script>
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('userDataForm');
            const resultSection = document.getElementById('resultSection');
            const resultFooter = document.getElementById('resultFooter');
            
            // 表单提交事件
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 获取表单数据
                const gender = document.querySelector('input[name="gender"]:checked').value;
                const height = parseFloat(document.getElementById('height').value);
                const weight = parseFloat(document.getElementById('weight').value);
                const activity = document.getElementById('activity').value;
                
                // 计算并显示结果
                calculateAndDisplayResults(gender, height, weight, activity);
                
                // 显示结果区域
                resultSection.classList.remove('hidden');
                resultFooter.classList.remove('hidden');
                
                // 滚动到结果区域
                resultSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
            });
            
            // 返回按钮事件
            document.getElementById('backBtn').addEventListener('click', function() {
                window.history.back();
            });
            
            // 保存推荐按钮事件
            document.getElementById('saveRecommendation').addEventListener('click', function() {
                alert('已将推荐的早餐组合保存到你的计划中！');
            });
        });
        
        // 计算并显示结果
        function calculateAndDisplayResults(gender, height, weight, activity) {
            // 计算BMI
            const heightM = height / 100;
            const bmi = parseFloat((weight / (heightM * heightM)).toFixed(1));
            document.getElementById('bmiValue').textContent = bmi;
            
            // 确定BMI状态
            let bmiStatus = '';
            if (bmi < 18.5) {
                bmiStatus = '偏轻';
                document.getElementById('bmiStatus').className = 'text-xs text-blue-500';
            } else if (bmi < 24) {
                bmiStatus = '正常范围';
                document.getElementById('bmiStatus').className = 'text-xs text-health';
            } else if (bmi < 28) {
                bmiStatus = '超重';
                document.getElementById('bmiStatus').className = 'text-xs text-health-warning';
            } else {
                bmiStatus = '肥胖';
                document.getElementById('bmiStatus').className = 'text-xs text-health-danger';
            }
            document.getElementById('bmiStatus').textContent = bmiStatus;
            
            // 计算基础代谢率(BMR)使用Mifflin-St Jeor公式
            let bmr;
            if (gender === 'male') {
                bmr = 10 * weight + 6.25 * height - 5 * 30 + 5; // 假设平均年龄30岁
            } else {
                bmr = 10 * weight + 6.25 * height - 5 * 30 - 161; // 假设平均年龄30岁
            }
            
            // 根据活动水平计算每日总能量消耗(TDEE)
            const activityFactors = {
                sedentary: 1.2,
                light: 1.375,
                moderate: 1.55,
                active: 1.725,
                veryActive: 1.9
            };
            
            const tdee = Math.round(bmr * activityFactors[activity]);
            document.getElementById('caloriesValue').textContent = tdee.toLocaleString();
            
            // 早餐建议热量(约占全天30%)
            const breakfastCalories = Math.round(tdee * 0.3);
            document.getElementById('breakfastCalories').textContent = breakfastCalories.toLocaleString();
            
            // 计算蛋白质需求(每公斤体重0.8-1.0g，早餐约占30%)
            const proteinPerKg = bmi < 18.5 ? 1.0 : (bmi < 24 ? 0.8 : 0.9);
            const dailyProtein = weight * proteinPerKg;
            const breakfastProtein = Math.round(dailyProtein * 0.3);
            document.getElementById('proteinNeed').textContent = `${breakfastProtein-5}-${breakfastProtein+5}g`;
            
            // 生成个性化营养建议
            generateNutritionTip(gender, bmi, activity);
        }
        
        // 生成个性化营养建议
        function generateNutritionTip(gender, bmi, activity) {
            const tipElement = document.getElementById('nutritionTip');
            let tip = '';
            
            if (bmi < 18.5) {
                tip = '你的BMI偏低，建议早餐增加健康热量摄入，如全脂牛奶、坚果和优质蛋白质，帮助达到健康体重。';
            } else if (bmi < 24) {
                if (activity === 'sedentary' || activity === 'light') {
                    tip = '根据你的身体数据和活动水平，建议早餐控制精制碳水化合物摄入，增加膳食纤维，有助于维持健康体重。';
                } else {
                    tip = '你的活动量较大，早餐应包含足够的复合碳水化合物和蛋白质，为身体提供持续能量支持日常活动。';
                }
            } else {
                tip = '你的BMI偏高，建议选择低GI值的碳水化合物和充足的蛋白质，增加膳食纤维摄入，有助于控制体重和维持饱腹感。';
            }
            
            tipElement.textContent = tip;
        }
    </script>
</body>
</html>
